<script setup lang="ts">
  import { OrderState } from '@/constants/index'
  import { reqGetOrderList, reqOrderDel } from '@/api/order'
  import type { OrderItem, OrderListParams, OrderListResult } from '@/types/order'
  import { ref } from 'vue'
  import { onMounted } from 'vue'
  const props = defineProps<{
    /** 订单状态，1为待付款、2为待发货、3为待收货、4为待评价、5为已完成、6为已取消，未传该参数或0为全部 */
    orderState: number
  }>()
  // 获取屏幕边界到安全区域距离
  const { safeAreaInsets } = uni.getSystemInfoSync()
  // 获取订单列表信息
  const orderData = ref<OrderListResult>()
  // 获取订单列表信息数组，用于渲染页面
  const orderList = ref<OrderItem[]>([])
  // 请求参数
  const params: OrderListParams = {
    page: 1,
    pageSize: 5,
    orderState: props.orderState
  }
  // 结束标记
  const finish = ref(false)
  // 发生请求获取数据
  const getOrderList = async () => {
    if (finish.value) {
      return uni.showToast({
        icon: 'none',
        title: '没有更多数据了'
      })
    }
    // 发起请求
    uni.showLoading({ mask: true })
    const res = await reqGetOrderList(params)
    orderData.value = res.result
    orderList.value = [...orderList.value, ...res.result.items]
    uni.hideLoading()
    if (res.result.page < res.result.pages) {
      // 页码自增
      params.page!++
    } else {
      finish.value = true
    }
  }

  onMounted(() => {
    getOrderList()
  })

  // 删除订单回调
  const onOrderDel = (orderId: string) => {
    uni.showModal({
      content: '确认删除订单吗？',
      success: async success => {
        if (success.confirm) {
          // 删除订单
          await reqOrderDel({ ids: [orderId] })
          // 跳转到订单列表页
          uni.showToast({
            icon: 'success',
            title: '删除成功'
          })
        }
      }
    })
  }

  // 滚动触底回调
  const onScrolltolower = () => {
    getOrderList()
  }
  // 是否在下拉刷新
  const isRefresh = ref(false)
  // 下拉刷新
  const onRefresherrefresh = async () => {
    isRefresh.value = true
    // 重置数据
    finish.value = false
    params.page = 1
    orderList.value = []
    // 重新发送请求
    await getOrderList()
    isRefresh.value = false
  }
</script>

<template>
  <scroll-view
    scroll-y
    class="orders"
    :refresher-enabled="true"
    :refresher-triggered="isRefresh"
    @scrolltolower="onScrolltolower"
    @refresherrefresh="onRefresherrefresh"
  >
    <view class="card" v-for="item in orderList" :key="item.id">
      <!-- 订单信息 -->
      <view class="status">
        <text class="date">{{ item.createTime }}</text>
        <!-- 订单状态文字 -->
        <text v-if="item.orderState === OrderState.DaiFuKuan">待付款</text>
        <!-- 待评价/已完成/已取消 状态: 展示删除订单 -->
        <text class="icon-delete" v-if="item.orderState > 3" @click="onOrderDel(item.id)"></text>
      </view>
      <!-- 商品信息，点击商品跳转到订单详情，不是商品详情 -->
      <navigator
        v-for="sku in item.skus"
        :key="sku.id"
        class="goods"
        :url="`/pagesOrder/detail/detail?id=${item.id}`"
        hover-class="none"
      >
        <view class="cover">
          <image mode="aspectFit" :src="sku.image"></image>
        </view>
        <view class="meta">
          <view class="name ellipsis">{{ sku.name }}</view>
          <view class="type">{{ sku.attrsText }}</view>
        </view>
      </navigator>
      <!-- 支付信息 -->
      <view class="payment">
        <text class="quantity">共{{ item.totalNum }}件商品</text>
        <text>实付</text>
        <text class="amount">
          <text class="symbol">¥</text>
          {{ item.payMoney }}
        </text>
      </view>
      <!-- 订单操作按钮 -->
      <view class="action">
        <!-- 待付款状态：显示去支付按钮 -->
        <template v-if="item.orderState === OrderState.DaiFuKuan">
          <view class="button primary">去支付</view>
        </template>
        <template v-else>
          <navigator
            class="button secondary"
            :url="`/pagesOrder/create/create?orderId=${item.id}`"
            hover-class="none"
          >
            再次购买
          </navigator>
          <!-- 待收货状态: 展示确认收货 -->
          <view v-if="item.orderState === OrderState.DaiShouHuo" class="button primary">
            确认收货
          </view>
        </template>
      </view>
    </view>
    <!-- 底部提示文字 -->
    <view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
      {{ finish ? '没有更多数据~' : '正在加载...' }}
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped></style>
